import * as echarts from "../../../ec-canvas/echarts";
import { handlerGobackClick } from "../../../utils/util";
import { Device } from "../../../models/device";
const app = getApp();

const device = new Device();
var Chart = null;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    baseImgUrl: "",
    id: "",
    ec: {
      lazyLoad: true,
      // onInit: initChart
    },
    result: {},
    tabOne0: [],
    loading0: false,
    noMore0: false,
    pageNo0: 1,
    loadingFailed0: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent("#mychart-dom-line");
    if (options.id) {
      this.setData({
        id: options.id,
      });
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // this.initDataPage();
  },
  //初始化图表
  init_echarts: function (x, y) {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      // Chart.setOption(this.getOption());
      this.setOption(Chart, x, y);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  setOption: function (Chart, x, y) {
    Chart.clear(); // 清除
    Chart.setOption(this.getOption(x, y)); //获取新数据
  },
  getOption: function (x, y) {
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: "axis",
        padding: [3, 8],
        textStyle: {
          fontSize: 12,
        },
        formatter: function (e) {
          return e[0].axisValue + ":" + e[0].value + "次";
        },
        backgroundColor: "#0180ec",
      },
      grid: {
        left: 12,
        right: 12,
        bottom: 20,
        top: 0,
        containLabel: false,
      },
      xAxis: {
        type: "category",
        data: x,
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
        // boundaryGap:false,
        axisLabel: {
          interval: function (index, value) {
            if (value == "1月") {
              return value;
            } else if (value == "6月") {
              return value;
            } else if (value == "12月") {
              return value;
            } else {
              return false;
            }
          },
          textStyle: {
            color: "#afafaf",
            fontSize: 12,
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: function () {
            return "";
          },
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#d8d8d8",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#333",
          },
        },
        nameTextStyle: {
          show: false,
          color: "#999",
        },
        splitArea: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "次数",
          type: "line",
          data: y,
          color: "#F58080",
          symbolSize: 7,
          lineStyle: {
            normal: {
              width: 2,
              color: "#0180ec",
              shadowColor: "rgba(67, 143, 255, 0.32)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
          },
          itemStyle: {
            normal: {
              color: "#0180ec",
              borderWidth: 3,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
                         shadowBlur: 100,*/
              borderColor: "#0180ec",
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(11,101,225,0.1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(1,156,248,0.05)",
                  },
                ],
                false
              ),
            },
          },
        },
      ],
    };
    return option;
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var { baseImgUrl } = getApp().globalImgUrl.config;
    this.setData({
      baseImgUrl,
    });

    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          screenHeight: res.screenHeight,
        });
      },
    });

    Chart = null;
    this.initDataPage();
  },
  handlerGobackClick,
  scrollBottom() {
    if (!this.data.loading0 && !this.data.noMore0) {
      this.setData({
        loading0: true,
        pageNo0: this.data.pageNo0 + 1,
      });
      device
        .alarmList(this.data.pageNo0, 10, this.data.id)
        .then((res) => {
          this.setData({
            loading0: false,
          });
          this.setData({
            tabOne0: this.data.tabOne0.concat(res.result.records),
          });
          if (res.result.records.length == 0) {
            this.setData({
              noMore0: true,
            });
          }
        })
        .catch((err) => {
          this.setData({
            loadingFailed0: true,
          });
        });
    }
  },
  initDataPage() {
    device
      .getById(this.data.id)
      .then((res) => {
        this.setData({
          result: res.result,
        });
        //如果是第一次绘制
        if (!Chart) {
          this.init_echarts(res.result.alarmsMonth.x, res.result.alarmsMonth.y); //初始化图表
        } else {
          this.setOption(Chart); //更新数据
        }
      })
      .catch((err) => {
        console.log(err);
      });
    device
      .alarmList(this.data.pageNo0, 10, this.data.id)
      .then((res) => {
        this.setData({
          tabOne0: res.result.records,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  },
});
